// 1. 下载vuex: 终端命令(yarn add vuex -D and -S)
// 2. 引入vuex
import axios from 'axios'
import Vue from 'vue'
import Vuex from 'vuex'

// 3. 注册
Vue.use(Vuex)

// 4. 实例化store对象
const store = new Vuex.Store({
    // 共享的数据源
    state: {
        goodsList: []
    },
    // 唯一修改同步state的操作者
    mutations: {
        setGoodsList(state, newList) {
            state.goodsList = newList
        }
    },
    // actions - 异步修改state，但是 最终还是需要 commit 到  mutations中 本质也是函数
    actions: {
        async asyncsetGoodsList(store) {
            // 1. 发送ajax请求
            const res = await axios({
                    method: 'GET',
                    url: 'https://www.escook.cn/api/cart'
                })
                // 2. 后台响应的数据 commit到setGoodsList mutations中
            store.commit('setGoodsList', res.data.list)
        }
    },
    // vuex-计算属性
    getters: {
        totalCount(state) {
            return state.goodsList.reduce((sum, obj) => {
                if (obj.goods_state) {
                    sum += obj.goods_count;
                }
                return sum;
            }, 0)
        },
        totalPrice(state) {
            return state.goodsList.reduce((sum, obj) => {
                if (obj.goods_state) {
                    sum += obj.goods_count * obj.goods_price
                }
                return sum;
            }, 0)
        }
    }
})

// 5. 导出
export default store